<template>
  <div class="parentView">
    <div class="container" :style="addPadding?'padding-bottom:60px':''">
      <keep-alive>
        <router-view />
      </keep-alive>
      <div class="bottom acea-row row-center" v-show="showBottom">
        <div class="left acea-row row-middle row-column row-between">
          <a href="tel:400-0165789" class="phone acea-row row-middle"><van-icon size="16" name="phone-o" /><span>400-0165789</span></a>
          <p class="ba">&copy;2019-2021 xiaobaiqiu Inc</p>
          <p class="ba">赣企ICP备14002260号</p>
        </div>
        <div class="right acea-row row-middle row-column row-between">
          <a href="https://xiaobaiqiu.com/mobile/appinfo" class="phone acea-row row-middle"><van-icon size="16" name="back-top" style="transform:rotate(180deg);" /><span>下载小白球APP</span></a>
          <a href="https://beian.miit.gov.cn" class="ba acea-row row-middle"> <img style="margin-right:5px;" class="footer-icon" src="@/static/images/120logo.png" alt=""> 南昌全元科技有限公司</a>
          <p class="ba acea-row row-middle"> <img style="margin-right:5px;" src="@/static/images/footer003.png" alt=""> 赣公网安备36010802000344号</p>
        </div>
      </div>
    </div>
    <van-tabbar route class="footer" v-show="footerShow">
      <!-- <van-tabbar-item replace :to="routerUrl+'/ball/'+courseid" icon="description">球场</van-tabbar-item> -->
      <van-tabbar-item replace :to="routerUrl+''" icon="description">球场</van-tabbar-item>
      <van-tabbar-item replace :to="routerUrl+'/user'" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import config from 'api/config.js'

export default {
  name:"parentView",
  data() {
    return {
      routerUrl:config.routerUrl,
    }
  },
  mounted() {
  },
  computed:{
    courseid(){
      return this.$store.state.common.courseid
    },
    footerShow(){
      return this.$store.state.common.footerShow
    },
    addPadding(){
      return this.$store.state.common.ifAddPadding
    },
    showBottom(){
      return this.$store.state.common.showBottom
    }
  }
}
</script>

<style scoped>
  .parentView{
    position: relative;
    width: 100%;
    height: 100vh;
  }
  .parentView .container{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    /* height: calc(100vh - 120px); */
    /* padding-bottom: 120px; */
  }
  .parentView .container .bottom{
    /* height: 160px; */
    padding: 40px 0;
    background-color: #f2f3f5;
    /* margin-bottom: 80px; */
    font-size: 28px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
  } 
  .parentView .container .bottom a{
    color: #000;
  }
  .parentView .container .bottom .right{
    /* margin-left: 40px; */
  }
  .parentView .container .bottom .right .ba,.parentView .container .bottom .left .ba{
    height: 40px;
    line-height: 40px;
  }
  .parentView .container .bottom .right .footer-icon{
    width: 40px;
    height: 40px;
  }
  .parentView .container .bottom .line{
    position: absolute;
    bottom: 40px;
    left: 50%;
    background-color: #cccccc;
    width: 2px;
    height: 30px;
    transform: translateX(-6px);
  }
  .parentView .container .bottom .ba{
    font-size: 24px;
    color: #cccccc;
  }
  .parentView .footer{
    position: fixed;
    width: 100%;
    height: 120px;
    bottom: 0;
    left: 0;
    font-size: 24px;
  }
</style>